<div class="alain-default__content-title">
  <h1>
    Colors
    <small>Color Palettes</small>
  </h1>
</div>
<div nz-row [nzGutter]="16" class="list">
  <div nz-col [nzMd]="24">
    <nz-card nzTitle="Classic colors">
      <div nz-row *ngFor="let c of brands">
        <div nz-col [nzSpan]="8">
          <div class="bg-{{ c }}-light p-lg">
            <p (click)="onCopy('bg-' + c + '-light')">.bg-{{ c }}-light</p>
            <p (click)="onCopy('text-' + c + '-light')">.text-{{ c }}-light</p>
          </div>
        </div>
        <div nz-col [nzSpan]="8">
          <div class="bg-{{ c }} p-lg">
            <p (click)="onCopy('bg-' + c)">.bg-{{ c }}</p>
            <p (click)="onCopy('text-' + c)">.text-{{ c }}</p>
          </div>
        </div>
        <div nz-col [nzSpan]="8">
          <div class="bg-{{ c }}-dark p-lg">
            <p (click)="onCopy('bg-' + c + '-dark')">.bg-{{ c }}-dark</p>
            <p (click)="onCopy('text-' + c + '-dark')">.text-{{ c }}-dark</p>
          </div>
        </div>
      </div>
    </nz-card>
  </div>
</div>
<div nz-row [nzGutter]="16" class="list">
  <div nz-col [nzMd]="24">
    <nz-card nzTitle="Name colors">
      <div nz-row *ngFor="let c of names">
        <div nz-col [nzSpan]="8">
          <div class="bg-{{ c }}-light p-lg">
            <p (click)="onCopy('bg-' + c + '-light')">.bg-{{ c }}-light</p>
            <p (click)="onCopy('text-' + c + '-light')">.text-{{ c }}-light</p>
          </div>
        </div>
        <div nz-col [nzSpan]="8">
          <div class="bg-{{ c }} p-lg">
            <p (click)="onCopy('bg-' + c)">.bg-{{ c }}</p>
            <p (click)="onCopy('text-' + c)">.text-{{ c }}</p>
          </div>
        </div>
        <div nz-col [nzSpan]="8">
          <div class="bg-{{ c }}-dark p-lg">
            <p (click)="onCopy('bg-' + c + '-dark')">.bg-{{ c }}-dark</p>
            <p (click)="onCopy('text-' + c + '-dark')">.text-{{ c }}-dark</p>
          </div>
        </div>
      </div>
      <div nz-row>
        <div nz-col [nzSpan]="5">
          <div class="bg-grey-darker p-lg">
            <p (click)="onCopy('bg-grey-darker')">.bg-grey-darker</p>
            <p (click)="onCopy('text-grey-darker')">.text-grey-darker</p>
          </div>
        </div>
        <div nz-col [nzSpan]="5">
          <div class="bg-grey-dark p-lg">
            <p (click)="onCopy('bg-grey-dark')">.bg-grey-dark</p>
            <p (click)="onCopy('text-grey-dark')">.text-grey-dark</p>
          </div>
        </div>
        <div nz-col [nzSpan]="4">
          <div class="bg-grey p-lg">
            <p (click)="onCopy('bg-grey')">.bg-grey</p>
            <p (click)="onCopy('text-grey')">.text-grey</p>
          </div>
        </div>
        <div nz-col [nzSpan]="5">
          <div class="bg-grey-light p-lg">
            <p (click)="onCopy('bg-grey-light')">.bg-grey-light</p>
            <p (click)="onCopy('text-grey-light')">.text-grey-light</p>
          </div>
        </div>
        <div nz-col [nzSpan]="5">
          <div class="bg-grey-lighter p-lg">
            <p (click)="onCopy('bg-grey-lighter')">.bg-grey-lighter</p>
            <p (click)="onCopy('text-grey-lighter')">.text-grey-lighter</p>
          </div>
        </div>
      </div>
    </nz-card>
  </div>
</div>
<div nz-row [nzGutter]="16" class="list">
  <div nz-col [nzMd]="24">
    <nz-card nzTitle="Full Colors">
      <div nz-row>
        <div nz-col [nzSpan]="4" *ngFor="let c of names">
          <div *ngFor="let i of nums" class="bg-{{ c }}-{{ i }} p-lg">
            <p (click)="onCopy('bg-' + c + '-' + i)">.bg-{{ c }}-{{ i }}</p>
            <p (click)="onCopy('bg-' + c + '-' + i + '-h')">.bg-{{ c }}-{{ i }}-h</p>
            <p (click)="onCopy('text-' + c + '-' + i)">.text-{{ c }}-{{ i }}</p>
          </div>
        </div>
      </div>
    </nz-card>
  </div>
</div>
